<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		
		

		<form class="layui-form" action="" lay-filter="example" id="myform">
			<div class="layui-form-item" style="margin-top: 5px;">
				<label class="layui-form-label">交易编号</label>
				<div class="layui-input-block">
					<input type="text" name="out_trade_no" id="orderId" disabled="disabled" style="width: 50%;" lay-verify="title" autocomplete="off" class="layui-input" value="1212312312">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
				  <input type="text" autocomplete="off" name="subject" class="layui-input" disabled="disabled" style="width: 50%;" id="test1" value="凤达租车平台充值">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品属性</label>
				<div class="layui-input-block">
				  <input type="text" name="product_code" class="layui-input" disabled="disabled" style="width: 50%; display: inline-block" id="rentalPrice" value="QJCBAU"> 
				  <!-- <span style="display: inline-block; color: red;">*(已包含押金)每笔交易都将加上10000元押金</span> -->
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">充值金额</label>
				<div class="layui-input-block">
				  <input type="text" name="total_amount" class="layui-input"  style="width: 50%;" id="rentalDay" value="">
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
					<button type="submit" class="layui-btn" lay-submit=""  id="clickRental" lay-filter="demo1">充值</button>
					<!-- <button type="button" id="LAY-component-form-getval">验证</button> -->
				</div>
			</div>
		</form>
		
		<script src="../layui/layui.js" charset="utf-8"></script>
		<!-- <script type="text/javascript" src="layui/js/jquery-1.8.3.min.js"></script> -->
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
		
		 
		
		</script>
		<script>
		
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					$ = layui.jquery,
					layedit = layui.layedit,
					laydate = layui.laydate;

		$(document).ready(function(){
			 var num = ''; for (var i = 0; i < 10; i++) { num += Math.floor(Math.random() * 10); } 
			 $('#orderId').attr('value',1+num)
		})

				//监听提交
				form.on('submit(demo1)', function(data) {
					var value = localStorage.getItem("user");
					 var user = JSON.parse(value);
					// console.log(data);
					var payInfo = {
						out_trade_no: data.field.out_trade_no,
						subject: data.field.subject,
						product_code: data.field.product_code,
						total_amount: data.field.total_amount,
						userId: user.userId
					};
					// console.log(payInfo);
					$.ajax({
						url: 'http://localhost:8085/userBalance/pay',
						data: payInfo,
						type: 'GET',
						dataType: "json",
						timeout: 300000,
						// contentType: 'application/json; charset=UTF-8',
						success: function(result) {
							console.log(result.msg);
							// if (result.code === 200) {
								// $(result).replaceAll('#myform')
								$('body').html(result.msg)
								// document.forms[0].submit()
							  //支付宝支付
							 //     const div = document.createElement('div');
								//  div.inner = result.msg; // html code
								//  document.body.appendChild(div);
								// document.forms[0].submit();
							        
							 // }

							        

						}
					});
					return false;
				});



				//表单取值
				layui.$('#LAY-component-form-getval').on('click', function() {
					var data = form.val('example');
					// alert(JSON.stringify(data));
					console.log(data);
				});

			});
		</script>
		<style>
			.layui-input {
				width: 100%
			}
		</style>
	</body>
</html>
